<template>
  <div>
    <h2>{{ isEdit ? '编辑教师' : '添加教师' }}</h2>
    <form @submit.prevent="saveTeacher">
      <div>
        <label>教师ID:</label>
        <input v-model="teacherForm.id" type="text" disabled>
      </div>
      <div>
        <label>用户ID:</label>
        <input v-model="teacherForm.userId" type="text">
      </div>
      <div>
        <label>教师姓名:</label>
        <input v-model="teacherForm.teaName" type="text" required>
      </div>
      <div>
        <label>课程数量:</label>
        <input v-model="teacherForm.coursNum" type="number" min="0">
      </div>
      <button type="submit">{{ isEdit ? '保存修改' : '添加教师' }}</button>
    </form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { teacherApi } from '@/api/teacher'

const isEdit = ref(false)
const teacherForm = reactive({
  id: '',
  userId: '',
  teaName: '',
  coursNum: 0
})

const saveTeacher = async () => {
  try {
    if (isEdit.value) {
      await teacherApi.updateTeacher({...teacherForm})
    } else {
      await teacherApi.saveTeacher(teacherForm)
    }
    // 编辑组件通常不负责刷新列表，由调用者处理
    // 这里仅作为示例
    window.location.href = '/teacher/list'
  } catch (error) {
    console.error('保存失败:', error)
  }
}
</script>